<template>
	<!-- 导航横向滑动 -->
	<div class="swiper-horizontal-wrap">
		<div class="swiper-container swiper-no-swiping swiper-horizontal" :id="'horizontal'+id">
			<div class="swiper-wrapper">
				<div class="swiper-slide"  v-for='(val,i) in horizontalArr' :key="'ban'+i">
					<a class="swiper-a">
						<div class="swiper-slide-null" v-if="val.url" :style="{backgroundImage: 'url(' + val.url + ')'}"></div>
						<div class="swiper-slide-null" v-else></div>
					</a>
				</div>
				<div class="swiper-slide" v-if="horizontalArr.length == 1">
					<a class="swiper-a">
						<div class="swiper-slide-null"></div>
					</a>
				</div>
				<div class="swiper-slide" v-if="horizontalArr.length <= 2">
					<a class="swiper-a">
						<div class="swiper-slide-null"></div>
					</a>
				</div>
			</div>   
		</div>
		<i class="iconfont icon-left"></i>
		<i class="iconfont icon-right"></i>
	</div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
export default {
	data(){
		return {
			swiper: null,//轮播
		}
	},
	props:{
		horizontalArr: Array,
		id: String,
		gap: Number,
	},
	mounted(){ 
		this.newSwiper();
	},
	destroyed(){
		this.swiper && this.swiper.destroy(false, false);
	},
	methods:{
		newSwiper(){
            this.$nextTick(()=>{
				this.swiper && this.swiper.destroy(false, false);
				let obj = {
					slidesPerView: 'auto',
					slidesPerView: 3, //可视图片2张 
					spaceBetween: this.gap, //图片间距
					observer: true,//修改swiper自己或子元素时，自动初始化swiper
					observeParents: true,//修改swiper的父元素时，自动初始化swiper
					observeSlideChildren:true,
					// lazyLoadingInPrevNext : true,//图片预先加载
					lazyLoadingInPrevNextAmount : 3,
					// paginationClickable: true,
				}
				this.swiper = new Swiper ('#horizontal'+this.id, obj);
			})
		},
	},
	watch: {
		horizontalArr:{
			handler:function(val,old){
				this.newSwiper();
			},
			deep:true
		},
		gap:{
			handler(val){
				this.newSwiper();
			},
			deep: true
		}
	}
}
</script>
<style lang="less" scoped>
@import "../../../../../static/css/style.less";
@import "../../../../../static/css/element.less";
@import "../../../../../static/css/imgStyle.less";
</style>

